<template>
  <!-- 在app.vue外部包裹div ，是为了为主题切换提供后续的操作功能 -->
  <!-- vue中只有 class 和 style 能够同时支持动静绑定 -->
  <div class="box" :class="{ dark: isDark }">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  computed: {
    isDark() {
      return this.$store.state.isDark;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 100vh;
  width: 100vw;
  // 亮色主题颜色
  background-color: #efefef;
  --bg-color: #ffffff;
  --font-color: #333333;
  --shadow-color: #0000001a;
}
.dark {
  // 暗色主题颜色
  color: #e5eaf3;
  background-color: #363636;
  --bg-color: #1d1e1f;
  --font-color: #ffffff;
  --shadow-color: #000000b8;
}
</style>
